<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
          <!-- 用一个行列布局 -->
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
            <el-col :span="20">
              <svg-icon icon-class="home" /><span>江苏传智播客教育科技股份有限公司</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span>
                      操作<i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>


          <!-- 放置一个el-tree组件 -->
    <el-tree
    :data="list"
    :default-expand-all="true"
  >
    <!-- 作用域插槽 data拿到的是每一个子节点的对象 -->
    <!-- 
      #default === slot-scope
      什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染 (类似于table 单元格数据渲染)
    -->
    <template #default="{ data }">
      <el-row
        type="flex"
        justify="space-between"
        align="middle"
        style="height: 40px; width: 100%;"
      >
        <el-col :span="20">
          <span>{{ data.name }}</span>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <!-- 两个内容 -->
            <el-col>{{ data.manager }}</el-col>
            <el-col>
              <!-- 下拉菜单 element -->
              <el-dropdown>
                <span> 操作<i class="el-icon-arrow-down" /> </span>
                <!-- 下拉菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="hAdd(data.id)">添加子部门</el-dropdown-item>   
                  <el-dropdown-item>编辑部门</el-dropdown-item>
                  <el-dropdown-item>删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
 </el-tree>
</el-card> 
<el-dialog  title="添加或编辑" :visible.sync="showDialog"  :close-on-click-modal="false" :close-on-press-escape="false">
    <!-- 子组件 -->
  <addOrEdit></addOrEdit>
</el-dialog>  
    </div>
  </div>
</template>


<script>
// 导入接口中的 getDepartments()方法  查询企业的部门列表
import {getDepartments} from '@/api/departments.JS'
import {tranListToTreeData} from '@/utils/index'
// 导入子组件
import addOrEdit from './deptDialog'
export default {
    // 注册
    components:{
        addOrEdit
    },
  data() {
    return {
    //   依赖一份树形数据
      list: [],
      showDialog:false,
    }
  },
  created(){
    // 页面已加载就显示
    this.loadDepartments()
    },
  methods:{
    hAdd(id){
     this.showDialog=true
    },
    // 自定义一个页面加载方法
  async  loadDepartments(){
        try {
            // 发送请求获取数据
         const res=   await getDepartments()
        //  console.log('查询企业的部门列表',res); //res.data.depts
        //  因为打印结果res.data.depts中 第一个数组 是传智教育  我们不需要显示在页面中 所以要取出
        // 利用arr.shift()方法删除数组中的第一个
         const company = res.data.depts.shift()  //取出数组中第一个元素  赋值给company
        //  console.log('company',company); //得到传智教育这个数组
        // 把新的数组res.data.depts  保存在list中     //因为shift方法其实就是取出 数组的元素(第一个)  相当删除
        // this.list= res.data.depts
        // 利用res.data.depts()函数  转换平铺数据为树形数据
        this.list = tranListToTreeData(res.data.depts);
        } catch (error) {
            console.log(error);
        }
    }
  }
}
</script>